<template>
  <div>
    <!--    工具页面-->
    <Ipv4Tools v-bind:type_info="'添加'" v-bind:multipleSelection="multipleSelection" @listData='listData' />
    <Ipv4Tools ref="tools_box" v-bind:type_info="'编辑'" v-bind:edit_form="info" @listData='listData' />
    <!--    展示页面-->
    <el-table size='mini' :data="server_list" tooltip-effect="dark" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="type" :label="$t('类型')" :formatter="cmd_type">
      </el-table-column>
      <el-table-column prop="ipv4-address" :label="$t('目的IPv4网络地址')">
      </el-table-column>
      <el-table-column prop="ipv4-mask" :label="$t('掩码')">
      </el-table-column>
      <el-table-column prop="interface" :label="$t('出接口')">
      </el-table-column>
      <el-table-column prop="nexthop" :label="$t('下一跳')">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getIpv4Array } from '@/api/network/route/staticRoute'
import Ipv4Tools from './Ipv4Tools'
export default {
  name: 'ServerDiy',
  components: {
    Ipv4Tools
  },
  data () {
    return {
      server_list: [],
      info: {},
      editVisible: false,
      multipleSelection: [],
      record: {
        type: 'ipv4',
        page: 1,
        limit: 20
      },
      total: 0
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.record.page = 1
      this.listData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listData()
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    listData () {
      getIpv4Array(this.record).then((response) => {
        if (response.status === 0) {
          this.total = response.count
          this.server_list = response.info
        }
      })
    },
    handel_array (row) {
      let test = ''
      row.member.forEach((item, index, array) => {
        if (index === row.member.length - 1) {
          test += item
        } else {
          test += item + ','
        }
      })
      return test
    },
    cmd_type (row) {
      switch (row.type) {
        case 1:
          return this.$t('静态路由')
        case 2:
          return this.$t('直连路由')
        default:
          return this.$t('其他')
      }
    },
    get_info (row) {
      let formData = {}
      formData.session_id = sessionStorage.getItem('system_key')
      formData.name = row.name
      this.$axios.post('service/getServiceInfo/', this.$qs.stringify(formData)).then((response) => {
        if (response.status === 0) {
          this.info = response.info[0]
          this.$refs.tools_box.edit_info()
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
